<template>
	<div class="">
		<uni-popup ref="popup" maxHeight="100vh" width="90%">
			<div class="invation">
				<div class="addcontent">
					<a class="closemask" @click="closemask()">
						<img :src="`${constant.imgUrl}design/addfriclose.png`" alt="">
					</a>
					<div class="invation_content" v-show="hide_send">
						<p class="model1">方式一：手机号码邀请</p>
						<p class="input_alert">输入对方手机号码，邀请对方加入你的团队</p>
						<div class="write_phone">
							<input type="text" placeholder="请输入手机号码" @keyup="getFocus()" maxlength="11"
								   oninput="if(value.length>11)value=value.slice(0,11)" autofocus="autofocus"
								   v-model="mobiles">
							<a class="send_invation" v-show="sendinvation">发送邀请</a>
							<a class="send_invation invation_active" v-show="!sendinvation" @click="sendmsg()">发送邀请</a>
						</div>
					</div>

					<p class="model1">请对方扫描二维码或给对方发送邀请链接：</p>
					<div class="invation_qr">
						<div class="qrcode">
							<!-- <img :src="`${constant.imgUrl}design/user_img.png`" alt=""> -->
							<img :src="qrcode_img" alt="">
						</div>
						<div class="send_msg" @click="sendwechat()">查看邀请函</div>
						<p>二维码链接每次只能邀请一人</p>
					</div>
				</div>
			</div>
		</uni-popup>

	</div>
</template>

<script>
import { mobileReg } from '@/utils/tools/validate'
import uniPopup from '@/components/uni-popup/uni-popup.vue'

import { myteamCreate } from '@/api/buriedPoint'

export default {
	name: 'Invationmenber',
	props: {
		owner_user_id: {
			type: [String, Number]
		}
	},
	components: {
		uniPopup
	},
	data() {
		return {
			constant: this.$constant,
			sendinvation: true,
			invatonmask: false,
			mobiles: '',
			qrcode_img: '',
			invation_id: '',
			hide_send: false,
			edittypes: 'shopmain',
			url: ''
		}
	},
	mounted() {
		this.getinva_qcode()
	},
	methods: {
		closemask() { // 关闭弹窗
			this.$refs.popup.close()
		},
		getinva_qcode() {
			var userid = this.owner_user_id
			var that = this
			let data = {
				'owner_user_id': userid
			}
			myteamCreate().then((response) => {
				if (response.status == 'success') {
					this.url = response.data.url
					that.qrcode_img = response.data.qrcode
					that.invation_id = response.data.id
					if (that.qrcode_img == '') {
						that.qrcode_img = require(constants.imgUrl + 'design/icon_noqcode.png')
					}
				}
			})
		},
		getFocus() { // 获取焦点
			var mobiles = this.mobiles
			if (mobiles.length == 0) {
				//  this.$toast('请输入手机号码！')
				this.sendinvation = true
			} else if (mobiles.length !== 11) {
				//  this.$toast('请输入完整的手机号码！')
				this.sendinvation = true
			} else if (!mobileReg.test(mobiles)) {
				// this.$toast('请输入正确的手机号码！')
				this.sendinvation = true
			} else {
				this.sendinvation = false
			}
		},
		sendmsg() { // 发送邀请
			var mobiles = this.mobiles
			var userid = this.owner_user_id
			/* this.$router.push({
				name: 'Invationdetail',
				query: {
				  owner_user_id: userid
				}
			  }) */
		},
		sendwechat() { // 发送微信邀请
			var url = this.url
			uni.navigateTo({
				url
			})
		}
	}
}
</script>

<style scoped lang="scss">
	.uni-popup__wrapper-box{
		width: 100%;
	}
	.invation {
		height: 70vh;
		width: 100%;
		background: url($imgUrl+ "center/icon_invation.png");
		background-size: 100% 100%;
		color: #333333;

		.addcontent {
			padding: 40px;
			height: 100%;
			position: relative;
		}

		.closemask {
			position: absolute;
			width: 30px;
			height: 30px;
			right: 39px;
			top: 30px;

			img {
				float: left;
				width: 30px;
				height: 30px;
			}
		}

		.model1 {
			font-size: 30px;
			margin-top: 30%;
		}

		.invation_content {
			width: 100%;
			height: auto;
			margin-top: 60px;
		}
		.invation_content .input_alert {
			font-size: 24px;
			color: #999999;
			margin-top: 30px;
		}
		.invation_content .write_phone {
			width: 100%;
			height: 70px;
			border: 2px solid #dddddd;
			margin-top: 20px;
			border-radius: 35px;
			background: white;
			font-size: 30px;
			margin-bottom: 40px;
		}
		.invation_content .write_phone input {
			height: 60px;
			margin-top: 5px;
			margin-left: 15px;
			width: 68%;
			border: none;
			float: left;
		}
		.send_invation {
			width: 29%;
			height: 100%;
			float: right;
			line-height: 70px;
			color: white;
			background: #f6e396;
			text-align: center;
			border-radius: 0 35px 35px 0;
		}
		.invation_active {
			background: #FFD11A;
			color: black;
		}

		.invation_qr {
			margin-top: 20px;
		}
		.invation_qr .qrcode {
			width: 285px;
			height: 285px;
			margin-left: 28%;
			box-shadow: 0 3px 14px #cccccc;
			background: #ffffff;
		}

		.invation_qr .qrcode img {
			width: 248px;
			height: 248px;
			float: left;
			margin: 19px;
		}

		.invation_qr .send_msg {
			width: 320px;
			height: 70px;
			text-align: center;
			line-height: 70px;
			background: #ffd11a;
			font-size: 30px;
			border-radius: 35px;
			margin-top: 30px;
			margin-left: 24%;
		}

		.invation_qr p {
			text-align: center;
			font-size: 26px;
			color: #666666;
			margin-top: 19px;
		}

	}

</style>
